<template>
  <div class="container">

    <Category :listData="goods" title="商品">
      商品列表
    </Category>
    <Category  title="食物">
      <ul slot="center">
        <li v-for="(item,index) in foods" :key="index">{{item}}</li>
      </ul>
      <p slot="footer">底部呢</p>
    </Category>
    <Category :listData="movies" title="电影">

      <ul slot="center">
        <li v-for="(item,index) in goods" :key="index">{{item}}</li>
      </ul>

      <template slot="footer">
        <div>
          haha
        </div>
      </template>
    </Category>

  </div>
</template>

<script>
import Category from "./components/Category"
export default {
  name: 'App',
  components: {
    Category
  },
  data(){
    return {
      goods:["白菜","黑茶","小花"],
      foods:["食物","哦食物"],
      movies:["电影","小电高"]
    }
  }
}
</script>

<style>

  .container{
    display: flex;
    justify-content: space-around;
  }
</style>
